---
title: Text Reveal 
date: 2024-04-08
description: Fade in text as you scroll down the page.
author: dillionverma
published: true
video: https://cdn.magicui.design/text-reveal.mp4
---

<ComponentPreview name="text-reveal-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/text-reveal.tsx
```

<ComponentSource name="text-reveal" />

</Steps>

## Props

| Prop         | Type   | Description                                  | Default |
| ------------ | ------ | -------------------------------------------- | ------- |
| children     |        | The text to be shimmered.                    |         |
| className    | string | The class name to be applied to the shimmer. |         |
| text         | string | The text to do the animation for             | ""      |


## Credits

- Credit to [@itsarghyadas](https://twitter.com/itsarghyadas) for figuring out the foundation of this!
